/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useRef, useState } from "react";
import {
  Tree,
  Card,
  Button,
  Table,
  Modal,
  Form,
  Input,
  message,
  FormInstance,
} from "antd";
import { PAGE_SIZE } from "../../utils/constants";
import menuList from "../../config/menuList";
import { reqAddRole, reqRoles, reqUpdateRole } from "../../api";
import { memoryUsage } from "process";
import memory from "../../utils/memoryUtils";
import { formateDate } from "../../utils/dateUtils";
import storage from "../../utils/storageUtils";
import { useNavigate } from "react-router-dom";

// 角色管理组件
export default function Role() {
  // react-router-domV6 版本后用useNavigate狗子代替了useHistory
  let history = useNavigate();
  // 表单ref
  const Formref = useRef<FormInstance<any>>(null);

  // 表单ref
  const FormrefAuth = useRef<FormInstance<any>>(null);

  // 添加角色对话框是否存在
  const [isShow, setisShow] = useState(0);

  // 设置角色权限对话框是否存在
  const [isShowAuth, setisShowAuth] = useState(0);

  // 存放table中所有信息的
  const [roles, setroles] = useState<any>([]);
  // 选中的role
  const [selectRole, setselectRole] = useState<any>({});

  // 控制colume信息的
  const [columes, setcolumes] = useState<any>([]);

  // 获取role列表信息
  const getRole = async () => {
    const res = await reqRoles();
    if (res.status === 200) {
      setroles(res.data.data);
    }
  };

  // 初始化colume函数
  const initColumes = () => {
    setcolumes([
      {
        title: "角色名称",
        dataIndex: "name",
      },
      {
        title: "创建时间",
        dataIndex: "create_time",
        render: (create_time: any) => formateDate(create_time),
      },
      {
        title: "授权时间",
        dataIndex: "auth_time",
        render: (auth_time: any) => formateDate(auth_time),
      },
      {
        title: "授权人",
        dataIndex: "auth_name",
      },
    ]);
  };
  useEffect(() => {
    // 页面加载的时候初始化colume
    initColumes();
    // 获取role列表信息
    getRole();
  }, []);

  // 添加角色对话框的OK按键触发请求添加角色
  const addRoles = async () => {
    // 每次都重新将输入框内容情况
    Formref.current?.resetFields();
    // 用ref拿到input输入的信息然后用接口传
    const res = await reqAddRole(Formref.current?.getFieldValue("add"));
    if (res.status === 200) {
      message.success("角色添加成功!");
      // 添加成功后在此调用getRole()更新数据
      getRole();
    } else {
      message.error("角色添加失败!");
    }
    // 操作完成之后隐藏对话框
    setisShow(0);
  };

  // 设置权限对话框的OK按键 发送修改信息请求
  const updateRoles = async () => {
    // 收集要传入的所有参数
    let roles = selectRole;
    roles.menus = checkedKeys;
    // 取出当前登录的用户名称
    roles.auth_name = memory.user.username;
    roles.auth_time = Date.now();
    const res = await reqUpdateRole(roles);
    if (res.status === 200) {
      // 修改后更新role内容 强制退出
      getRole();
      // 如果当前更新的是自己角色的权限
      if (roles._id === memory.user.role_id) {
        // 清楚登录用户信息 需要重新登录再保存
        memory.user = {};
        storage.deleteUser();
        // 页面跳转
        history("/login", { replace: true });
        message.success("修改当前角色权限成功!");
      } else {
        message.success("修改权限成功!");
      }
    } else {
      message.error("修改权限失败!");
    }
    setisShowAuth(0);
  };

  // 隐藏添加角色的对话框
  const handleCancel = () => {
    // 隐藏对话框
    setisShow(0);
    // 每次都重新将输入框内容情况
    Formref.current?.resetFields();
  };

  // 隐藏修改权限的对话框
  const handleCancelAuth = () => {
    // 隐藏对话框
    setisShowAuth(0);
    // 每次都重新将输入框内容情况
    // Formref.current?.resetFields();
  };

  // 树形结构数据来自于修改后的menuList
  const treeData = menuList;
  // tree结构的一些配置
  const [expandedKeys, setExpandedKeys] = useState<any>([]);
  const [checkedKeys, setCheckedKeys] = useState<any>([]);
  const [selectedKeys, setSelectedKeys] = useState<any>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);

  const onExpand = (expandedKeysValue: any) => {
    console.log("onExpand", expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  // 点击之后会把对应位置选择上
  const onCheck = (checkedKeysValue: any) => {
    // console.log("onCheck", checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
    // console.log("onCheck", checkedKeys);
  };

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    // console.log("onSelect", info);
    // console.log("onSelect", info);
    setSelectedKeys(selectedKeysValue);
  };

  const title = (
    <span>
      <Button
        onClick={() => {
          setisShow(1);
        }}
        type="primary"
        style={{ marginRight: 20 }}
      >
        创建角色
      </Button>
      <Button
        onClick={() => {
          setisShowAuth(1);
        }}
        type="primary"
        disabled={!selectRole._id}
      >
        设置角色权限
      </Button>
    </span>
  );

  // 指定form表单里面item布局分布
  const formItemLayout = {
    labelCol: { span: 4 }, // 左侧label的宽度
    wrapperCol: { span: 18 }, // 右侧输入框的宽度
  };

  return (
    <div>
      <Card title={title}>
        <Table
          bordered
          rowKey="_id"
          dataSource={roles}
          columns={columes}
          pagination={{ defaultPageSize: PAGE_SIZE }}
          // selectedRowKeys是否选中某个radio
          rowSelection={{
            type: "radio",
            selectedRowKeys: [selectRole._id],
            onSelect: (role) => {
              // 当点击前面的小按钮radio的时候也可以选中 算是修改个小bug
              setselectRole(role);
            },
          }}
          // onRow是对行操作

          // 对某一行点击的时候触发回调 record是点击的那一行的所有数据
          onRow={(record) => {
            return {
              onClick: (event) => {
                // 把当前点击的行的信息给到selectRole 这个selectRole用到上面的selectedRowKeys
                setselectRole(record);
                // 设置角色已有权限
                setCheckedKeys(record.menus);
              },
            };
          }}
        ></Table>
        <Modal
          title="添加新的角色"
          visible={isShow === 1 ? true : false}
          onOk={addRoles}
          onCancel={handleCancel}
        >
          {/* 这里收集输入的form也组件化了,和category在一个文件夹中 */}
          <Form {...formItemLayout} ref={Formref}>
            <Form.Item
              label="角色名称"
              name="add"
              rules={[{ required: true, message: "请输入内容,不能为空。" }]}
            >
              <Input
                placeholder="请输入新的角色名称"
                type="text"
                // value={"text"}
                // style={{ width: 470 }}
              />
            </Form.Item>
          </Form>
        </Modal>
        {/* 设置用户权限 */}
        <Modal
          title="设置用户权限"
          visible={isShowAuth === 1 ? true : false}
          onOk={updateRoles}
          onCancel={handleCancelAuth}
        >
          {/* 这里收集输入的form也组件化了,和category在一个文件夹中 */}
          <Form {...formItemLayout} ref={FormrefAuth}>
            <Form.Item label="角色名称" name="auth">
              {/* 不可修改内容的input */}
              <Input
                disabled
                placeholder={selectRole.name}
                value={selectRole.name}
              />
            </Form.Item>
            <Form.Item label="权限信息" name="tree">
              {/* 树形结构选权限 */}
              <Tree
                checkable
                onExpand={onExpand}
                // expandedKeys={expandedKeys}
                // autoExpandParent={autoExpandParent}
                defaultExpandAll={true}
                onCheck={onCheck}
                checkedKeys={checkedKeys}
                onSelect={onSelect}
                selectedKeys={selectedKeys}
                treeData={treeData}
              />
            </Form.Item>
          </Form>
        </Modal>
      </Card>
    </div>
  );
}

// 视频P94
